<template>
  <transition name="slide">
    <div class="scroll" id="test" ref="wrapper" :data="question">
      <div>
        <div class="test_form" v-for="v of question">
          <div class="loading" :class="{'show':isLoading}">
            <img src="./loading.gif" alt="">
          </div>
          <div class="test_title">
            {{v.title}}
          </div>
          <ul class="ul_select">
            <li class="module" :class="{'select':ind === index}" @click="select_option(o.id,index)"
                v-for=" (o, index ) in v.options">
              {{o.option}}
            </li>
          </ul>
          <div class=" test_control">
            <div class="btn pre" :class="{'can_do':isPre}" @click="preQuestion">
              <span class="iconfont icon-back-icon-copy"></span>
              上一题
            </div>
            <div class="question_num"><span>{{v.question_num}}</span>/<span>{{testRule.test_rule.question_count}}</span>
            </div>
            <div class="btn next " :class="{'can_do':isNext,'lastHide':isShow}" @click="nextQuestion">
              下一题
              <span class="iconfont icon-getmore-icon"></span>
            </div>
            <div @click="postResult" :class="{'show':isShow,'can_submit':isPost}" class="get_result">
              查看结果
              <span class="iconfont icon-getmore-icon"></span>
            </div>
          </div>

        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import {mapActions, mapGetters, mapState} from 'vuex'
  import Bscroll from "better-scroll"
  import {ease} from "../../common/js/ease";

  export default {
    name: 'Test',
    data() {
      return {
        isNextIn: false,
        isPreIn: false,
        isNext: false,
        isPre: true,
        isPost: false,
        isShow: false,
        isDo: false,
        isLoading: true,
        answerId: '',
        tid: this.$route.params.tid,
        lastTid: '',
        ind: ""
      }
    },

    watch: {
      question() {
        if (this.question.questions.id == 1) {
          this.isPre = false
        } else {
          this.isPre = true
        }
        if (this.question.questions.question_num == this.testRule.test_rule.question_count) {
          this.isShow = true
        } else {
          this.isShow = false
        }

      },


    },
    computed: {
      ...mapGetters(['getQuestion', 'getTestRule']),

      question() {
        this.isLoading = false
        return this.getQuestion
      },
      testRule() {
        return this.getTestRule
      },
    },

    updated() {
      // console.log("更新中...")
      this.$nextTick(() => {
        this.scroll.scrollTo(0, 0, 0, ease[this.scrollToEasing])
        this.checkIndex()

      })
    },
    mounted() {
      let data = {
        tid: this.tid
      }
      this.loadQuestion(data)
      this.scroll = new Bscroll(this.$refs.wrapper,{
        click:true,
      })
      this.lastTid = this.tid
    },
    methods: {
      ...mapActions(['loadQuestion', 'loadNext']),
      select_option(id, index) {
        this.answerId = id
        this.ind = index
        /*检查下一题题号是否大于总题数*/
        this.isNext = true
        this.nextQuestion()
        // const token = this.$cookies.get('token')

      },

      checkIndex() {
        if (this.question.questions.user_answer == -1) {
          this.ind = ''
          this.isNext = false
        } else {
          this.ind = this.question.questions.user_answer - 1
          this.isNext = true
        }
      },

      preQuestion() {

      },
      nextQuestion() {
        if (!this.isNext) {
          return
        }
        this.isLoading = true
        let token = 1
        let data = {
          tid: this.tid,
          answer: this.answerId,
          question_id: this.question.questions.id,
          token: token
        }
        this.loadNext(data)

      },

      postResult() {
           this.$router.push({path:'/testResult/'+ this.tid })
      }
    },
    activated() {
      this.scroll.scrollTo(0, 0, 0, ease[this.scrollToEasing])
      this.tid = this.$route.params.tid
      if (this.lastTid != this.tid) {
        this.lastTid = this.tid
        this.loadQuestion(this.tid)
      }
    },
  }
</script>

<style scoped>
  #test {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 30;
    /*min-height: 1334px;*/
    background-color: #f5f4f7;
  }

  .test_form {
    padding: 72px 67px 196px 67px;
    min-height: 1254px;
    position: relative;
  }

  .loading {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 20px;
    top: 14px;
    z-index: 30;
    display: none;
  }
  .test_title {
    font-size: 34px;
    color: black;
    font-weight: bold;
    min-height: 50px;
  }

  .ul_select {
    width: 100%;
    margin-top: 70px;
    /*min-height: 900px;*/
  }

  li {
    padding: 33px 46px;
    color: #666;
    font-size: 28px;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    line-height: 1.79;
    letter-spacing: normal;
  }

  .ul_select .select {
    color: #059692;
    background-color: #d7eeed;
  }

  .test_control {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 100%;
    padding: 0 60px;
    text-align: center;
  }

  .test_control .can_do {
    color: #01beb7;
  }

  .lastHide {
    display: none !important;
  }

  .show {
    display: block !important;
  }

  .test_control div {
    width: 155px;

    display: inline-block;
  }

  .btn {
    color: #80cbc8;
  }

  .pre {
    float: left;
  }

  .next {
    float: right;
  }

  .test_control .question_num {
    margin: 0 auto;
    font-size: 28px;
    padding-top: 6px;
  }

  .question_num span {
    color: #666;

  }

  .question_num span:nth-of-type(1) {
    color: #ff6d00;
  }

  .icon-getmore-icon {
    font-size: 40px;
    margin-top: 2px;
    display: inline-block;
    float: right;
  }

  .icon-back-icon-copy {
    font-size: 40px;
    float: left;
    margin-top: 2px;
  }

  .test_control .get_result {
    background-color: #059692;
    color: white;
    width: 212px;
    height: 60px;
    border-radius: 32px;
    line-height: 64px;
    text-align: center;
    font-size: 32px;
    padding: 0 6px 0 20px;
    float: right;
    margin-top: -8px;
    display: none;
  }

  .get_result .icon-getmore-icon {
    margin-top: -2px;
  }
</style>
